<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="" class="ipt">
    <button class="send">按钮</button>

    <div id="update" style="display: none;">
        <h2>修改标题</h2>
        <input type="text" name="" id="">
        <button class="ok">确定</button>
        <button class="cancle">取消</button>
    </div>



    <ul>
        <li>
            <input type="checkbox" name="" id="">
            <p></p>
            <button>删除</button>
        </li>
    </ul>

    <h2> 收藏列表</h2>
    <ul class="clist">

    </ul>
    <script>
        var arr = [
            // { id: 1, title: '今天有业', completed: false },
            // { id: 2, title: '今天晚上要xx吃饭' },
            // { id: 3, title: '晚上睡觉之前xx' },
            // { id: 4, title: '今天有三个作业' },
        ]
        // 4-2
        let jsonStr = localStorage.getItem('arr');
        console.log(jsonStr);
        if (jsonStr != null) {
            //本地存的有 数组的数据
            arr = JSON.parse(jsonStr);

        }

        /*
            1- 加载列表-- 遍历数组 拼接字符串--赋值 到 ul中
                --加载列表功能封装成一个函数
            2- 添加功能-- 点击发布按钮-获取输入框的值--创建对象--添加到数组中--调用加载列表函数

            3- 事件委托 给 列表添加点击事件，判断事件源是不是删除按钮--

            4- 对留言数据的持久化存储 （本地存储）-- arr -存入 本地
                1-点击发布的时候 把arr存入本地
                2-打开页面--立刻读取本地的arr这个key里面的数据
        
        */
        // 1- 加载列表-- 遍历数组 拼接字符串--赋值 到 ul中

        function loadList() {
            // localStorage.setItem('arr', JSON.stringify(arr))

            let lisStr = '';
            arr.forEach(v => {
                console.log(v);
                // ${v.completed ? 'checked' : ''}   通过三目运算符 控制输入框是否有checked
                let liStr = `<li>
                    <input type="checkbox" name="" id="" onchange="changeState(${v.id})" ${v.completed ? 'checked' : ''}>
                    <p>${v.title}</p>
                    <button class="del" data-id="${v.id}">删除</button>
                    <button  data-id="${v.id}"  onclick="updateTitleHandler(${v.id})">修改内容</button>
                    <button  data-id="${v.id}" onclick="collectHandler(${v.id})">收藏</button>
                </li>`;
                lisStr += liStr
            });
            document.querySelector('ul').innerHTML = lisStr;
        }
        loadList()
        // 2- 添加功能-- 点击发布按钮-获取输入框的值--创建对象--添加到数组中--调用加载列表函数
        let btn = document.querySelector('.send');
        let ipt = document.querySelector('.ipt');
        btn.onclick = () => {
            let title = ipt.value;
            let idArr = arr.map(v => v.id);
            let maxId = Math.max(...idArr)
            let id = maxId === -Infinity ? 1 : maxId + 1;

            // 5--记录完成状态--对象添加一个  completed 属性，默认值为false 表示没有完成
            let obj = { title, id, completed: false };
            // arr.push(obj);
            arr.unshift(obj);

            // 4------------- 把arr 存入本地
            // 本地存储 是不能直接存 对象或者数组
            // 把arr转为json字符串
            localStorage.setItem('arr', JSON.stringify(arr))

            loadList();
            ipt.value = ''
        }
        // 3- 事件委托 给 列表添加点击事件，判断事件源是不是删除按钮--
        let ul = document.querySelector('ul');
        ul.onclick = function (evt) {
            if (evt.target.className == 'del') {
                //点击事件的代码
                console.log(evt.target.dataset.id);
                // 删除数组的元素
                arr = arr.filter(v => v.id != evt.target.dataset.id)

                // 4------------- 把arr 存入本地
                // 本地存储 是不能直接存 对象或者数组
                // 把arr转为json字符串
                localStorage.setItem('arr', JSON.stringify(arr))

                // 加载列表
                loadList()
            }
        }



        // 5--渲染列表的时候 给 ipt 添加一个行内事件
        function changeState(id) {
            console.log('change');
            console.log(id);
            //  change事件发生的时候，修改  对应的 数组中元素的 completed 属性，取反
            // 根据id 获取数组对应元素--修改元素的completed 属性，取反

            // 根据点击的按钮 传过来的id  找到数组中对应的对象
            let obj = arr.find(v => v.id == id)
            console.log(obj);

            // 修改了数组中元素
            obj.completed = !obj.completed;
            console.log(obj);

            // 修改完的数组 存入本地
            localStorage.setItem('arr', JSON.stringify(arr))



        }

        // 6-修改 title 事件
        // 渲染列表的时候，添加行内事件<button  data-id="${v.id}"  onclick="updateTitleHandler(${v.id})">修改内容</button>
        function updateTitleHandler(id) {
            console.log(id);
            let updateDiv = document.querySelector('#update');
            updateDiv.style.display = 'block'

            // 获取 数组中对应的元素
            let obj = arr.find(v => v.id = id)
            let updateIpt = updateDiv.querySelector("input")
            // 要修的内容显示到输入框中
            updateIpt.value = obj.title

            // 确定和取消按钮添加点击事件
            let okBtn = updateDiv.querySelector('.ok')
            let cancleBtn = updateDiv.querySelector('.cancle')
            cancleBtn.onclick = function () {
                updateDiv.style.display = 'none'
                console.log(11);
            }
            okBtn.onclick = function () {
                // 获取最新的title的值
                let newTitle = updateIpt.value;
                obj.title = newTitle;
                localStorage.setItem('arr', JSON.stringify(arr))
                loadList()

                updateDiv.style.display = 'none'


            }
        }


        // 7-收藏 
        // 加载列表的时候 添加行内事件collectHandler
        // 
        // 
        let collectArr = [];//定义保存 收藏数据的数组
        function collectHandler(id) {
            let obj = arr.find(v => v.id == id);

            collectArr.push(obj);
            localStorage.setItem('carr', JSON.stringify(collectArr))
            loadCollectList()

        }

        function loadCollectList() {
            let str = ''
            collectArr.forEach(v => {
                str += `<li>${v.title}</li>`;
            })
            document.querySelector('.clist').innerHTML = str;
        }


    </script>

</body>

</html>